<template>
  <div class="gauge" ref="gauge">
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import * as echartsOption from './../../utils/echarts-option'
export default {
  name: 'barLine',
  props: {
    // 头部信息
    title: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 角度
    angle: {
      type: [String, Number],
      default: 0,
      required: true
    },
    // 半径大小 如'50%'
    radius: {
      type: [String, Number]
    },
    // 填充区颜色
    borderColor: {
      type: Array
    }
  },
  components: {
  },
  data () {
    return {
      chart: ''
    }
  },
  methods: {
    initChart () {
      if (this.chart.isDisposed) {
        this.chart.dispose()
      }
      this.chart = echarts.init(this.$refs.chart)
      let maxRadius = this.$refs.gauge.offsetWidth / 2 > this.$refs.gauge.offsetHeight / 2 ? this.$refs.gauge.offsetHeight / 2 : this.$refs.gauge.offsetWidth / 2
      let chartOption = echartsOption.getGaugeOption({
        title: this.title,
        angle: this.angle,
        borderColor: this.borderColor, // 背景圆盘颜色
        detail: this.detail, // 里面百分比颜色
        maxRadius: maxRadius,
        radius: this.radius
      })
      this.chart.setOption(chartOption)
    },
    resizeChart () {
      this.chart.resize()
    }
  },
  mounted () {
    this.initChart()
  },
  watch: {
    angle: function () {
      this.initChart()
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  .gauge{
    width: 100%;
    height: 100%;
    .chart{
      width: 100%;
      height: 100%;
    }
  }
</style>
